<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
div {padding: 40px 50px;}
#div1 {background: red; position: relative;}
#div2 {background: green; position: relative;}
#div3 {background: orange; position: relative;}
</style>
<script type="text/javascript">
window.onload = function () {
	var oDiv3 = document.getElementById('div3');
	var iTop = 0;

	while(oDiv3){
		iTop += oDiv3.offsetTop;
		oDiv3 = oDiv3.offsetParent;
		//alert(iTop)						//40 => 80 => 88 =>88
		alert(oDiv3 + ':'+ oDiv3.id)		//object:div2 => object:div1 => object:body1
	}
	//alert(iTop)							//88

}
</script>
<body id="body1">
	<div id="div1">
    	<div id="div2">
        	<div id="div3"></div>
        </div>
    </div>

</body>
</html>